<template>
  <div class="collection">
    <div class="title-con">
      <h1>收藏夹</h1>
      <el-button type="danger" @click="remove">清空收藏夹</el-button>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
    >
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="localRemo"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <div class="coll">
      <div class="coll-item" v-for="(item, index) in list" :key="index">
        <div class="title">{{ item.text }}</div>
        <div class="content">
          <div class="concat" v-for="(l, cindex) in item.num" :key="cindex">
            <div class="c">
              <img :src="item.img" alt="" />
            </div>
            <p>
              <span>{{ item.price }}</span>
              <span>{{ item.state == 1 ? '已收藏' : '收藏' }}</span>
            </p>
          </div>
        </div>
        <div class="remo" @click="singleremove(index)">删除</div>
      </div>
    </div>
    <el-dialog
      v-model="singleVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
    >
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="singleVisible = false">取消</el-button>
          <el-button type="primary" @click="singleRemo"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, ref, defineComponent } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'

export default defineComponent({
  setup() {
    let store = useStore()

    const list = ref([])
    onMounted(() => {
      val()
    })
    // 获取本地收藏----筛选过滤相同
    const val = () => {
      list.value = JSON.parse(localStorage.getItem('Col'))
      var result = []
      var obj = {}
      if (!list.value) {
        return
      } else {
        for (var i = 0; i < list.value.length; i++) {
          if (!obj[list.value[i].price]) {
            result.push(list.value[i])
            obj[list.value[i].price] = true
          }
        }
        list.value = result
      }
      // console.log(list.value)
    }
    // 打开
    const remove = () => {
      dialogVisible.value = true
    }
    let index = ref()
    // 单个删除-打开按钮
    const singleremove = (i) => {
      index.value = i
      singleVisible.value = true
    }
    const dialogVisible = ref(false)
    const singleVisible = ref(false)
    // 清空文件夹
    const localRemo = () => {
      dialogVisible.value = false
      list.value = []
      store.commit('remoColl')
    }
    // 单个删除
    const singleRemo = () => {
      singleVisible.value = false
      list.value.splice(index.value, 1)
      localStorage.setItem('Col', JSON.stringify(list.value))
      // console.log(list.value)
    }

    const handleClose = (done) => {
      ElMessageBox.confirm('确定关闭吗?')
        .then(() => {
          done()
        })
        .catch(() => {
          // catch error
        })
    }
    return {
      list,
      remove,
      dialogVisible,
      handleClose,
      localRemo,
      singleVisible,
      singleRemo,
      singleremove,
      index,
    }
  },
})
</script>

<style lang="less" scoped>
.collection {
  .title-con {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 20px;
    h1 {
      text-align: center;
      color: rgba(248, 105, 2, 0.992);
      font-size: 28px;
    }
  }
  .coll {
    background: #35393c;

    .coll-item {
      display: flex;
      align-items: center;
      border-bottom: 3px solid #daae92;
      margin-bottom: 20px;
      padding: 10px 0;
      justify-content: space-between;
      &:last-child {
        border-bottom: none;
      }
      .title {
        font-size: 25px;
        color: white;
        padding: 20px 40px;
      }
      .content {
        display: flex;
        align-items: center;
        flex: 1;
        .concat {
          margin-right: 20px;
          .c {
            width: 100px;
            height: 100px;
            background-color: #fff;
            img {
              width: 100%;
              height: 100%;
            }
          }
          p {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 5px;
            color: white;
            span {
              &:nth-child(2) {
                background: rgba(248, 105, 2, 0.992);
                border-radius: 25px;
                color: white;
                font-size: 12px;
                padding: 3px 10px;
                cursor: pointer;
              }
            }
            .active {
              background: bisque !important;
              color: black !important;
            }
          }
        }
      }
      .remo {
        color: white;
        padding-right: 50px;
        cursor: pointer;
      }
    }
  }
}
</style>
